<template>
	<div style="width: 100%;height: 80vh; border: 1px solid red;">
		<a-calendar v-model:value="value" @panelChange="onPanelChange">
			<template #headerRender="{ value: current, type, onChange }">
				<div class="calendarHeader">
					<div class="headerText">{{ parseGMTDate(current).year }}年{{parseGMTDate(current).month}}月</div>
					<div class="headerSelect">
						<a-select size="small" :dropdown-match-select-width="false" class="my-year-select"
							:value="String(current.year())" @change="
						                  newYear => {
						                    onChange(current.year(+newYear));
						                  }
						                ">
							<a-select-option v-for="val in getYears(current)" :key="String(val)" class="year-item">
								{{ val }}
							</a-select-option>
						</a-select>
						<a-select :dropdown-match-select-width="false" :value="String(current.month())" @change="
			                    selectedMonth => {
			                      onChange(current.month(parseInt(String(selectedMonth), 10)));
			                    }
			                  ">
							<a-select-option v-for="(val, index) in getMonths(current)" :key="String(index)"
								class="month-item">
								{{ val }}
							</a-select-option>
						</a-select>
					</div>
				</div>
			</template>
			 <template #dateCellRender="{ current }">
			      <ul class="events">
			        <li v-for="item in getListData(current)" :key="item.content">
			          <a-badge :status="item.type" :text="item.content" />
			        </li>
			      </ul>
			    </template>
		</a-calendar>
	</div>
</template>
<script lang="ts" setup>
	import { ref } from 'vue';
	import { Dayjs } from 'dayjs';
	import { Calendar } from 'ant-design-vue';

	const ACalendar = Calendar;

	const value = ref<Dayjs>();

	const onPanelChange = (value : Dayjs, mode : string) => {
		console.log(value, mode);
	};

	const getMonths = (value : Dayjs) => {
		const localeData = value.localeData();
		const months = [];
		for (let i = 0; i < 12; i++) {
			months.push(localeData.monthsShort(value.month(i)));
		}
		return months;
	};

	const getYears = (value : Dayjs) => {
		const year = value.year();
		const years = [];
		for (let i = year - 10; i < year + 10; i += 1) {
			years.push(i);
		}
		return years;
	};

	// 将时间戳转换成年月
	const parseGMTDate = (gmt : string) => {
		const date = new Date(gmt);
		console.log(date, 8888888)

		return {
			year: date.getFullYear(),
			month: date.getMonth() + 1, // 月份从0开始，需要+1
			day: date.getDate()
		};
	}
	
	const getListData = (value: Dayjs) => {
	  let listData;
	  switch (value.date()) {
	    case 8:
	      listData = [
	        { type: 'warning', content: 'This is warning event.' },
	        { type: 'success', content: 'This is usual event.' },
	      ];
	      break;
	    case 10:
	      listData = [
	        { type: 'warning', content: 'This is warning event.' },
	        { type: 'success', content: 'This is usual event.' },
	        { type: 'error', content: 'This is error event.' },
	      ];
	      break;
	    case 15:
	      listData = [
	        { type: 'warning', content: 'This is warning event' },
	        { type: 'success', content: 'This is very long usual event。。....' },
	        { type: 'error', content: 'This is error event 1.' },
	        { type: 'error', content: 'This is error event 2.' },
	        { type: 'error', content: 'This is error event 3.' },
	        { type: 'error', content: 'This is error event 4.' },
	      ];
	      break;
	    default:
	  }
	  return listData || [];
	};
</script>
<style scoped>
	.calendarHeader {
		padding: 10px 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.headerText {
		font-size: 28px;
		font-weight: 600;
		letter-spacing: 2px
	}
	/deep/.ant-select {
		width: 150px;
	}
	
	.events {
	  list-style: none;
	  margin: 0;
	  padding: 0;
	}
	.events .ant-badge-status {
	  overflow: hidden;
	  white-space: nowrap;
	  width: 100%;
	  text-overflow: ellipsis;
	  font-size: 12px;
	}
	.notes-month {
	  text-align: center;
	  font-size: 28px;
	}
	.notes-month section {
	  font-size: 28px;
	}
</style>